<template>
  <div>
    <div class="hotBOx">
      <div class="hotContent">
        <div
          class="hotList"
          v-for="item in data"
          :key="item.id"
          @click="goHotContent(item.id, item.title)"
        >
          <div class="one">
            <div>{{ item.title }}</div>
            <span>全部<van-icon name="arrow" /></span>
          </div>
          <div class="two">
            <img :src="item.img_url" alt="" />
            <div class="itContent">
              <div v-for="(it, index) in item.contents" :key="it.id">
                <div>
                  <span :style="colors(index)">{{ index + 1 }}.</span
                  ><span style="color: #808080">{{ getLength(it.title) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHot } from "@/api/find";
export default {
  name: "hot",
  data() {
    return {
      data: [],
    };
  },
  created() {
    this.getHotData();
  },
  methods: {
    async getHotData() {
      const { data } = await getHot(""); //获取热榜数据 因接口与榜单内容共用，需传id，所以传个空字符串渲染榜单数据
      this.data = data;
      console.log("热榜数据", this.data);
    },
    goHotContent(id, title) {
      // 跳转到hotListDetails页面
      this.$router.push({
        path: "/hotListDetails",
        query: {
          id: id,
          title: JSON.stringify(title),
        },
      });
    },
    // 处理字数长度的方法
    getLength(str) {
      if (str.length > 14) {
        return str.substr(0, 14) + "...";
      } else {
        return str;
      }
    },
  },
  computed: {
    colors() {
      return (i) => {
        //js闭包传值操作
        if (i === 0) {
          return { color: "#D80000" };
        } else if (i === 1) {
          return { color: "#FF6565" };
        } else if (i === 2) {
          return { color: "#FEC86C" };
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.hotBOx {
  width: 375px;
  padding: 0px 15px 50px 15px;
  box-sizing: border-box;
  .hotContent {
    .hotList {
      padding: 20px 0;
      .one {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 15px;
        & > :nth-child(1) {
          font-size: 18px;
          color: #000;
        }
        span {
          font-size: 14px;
          color: #bcbcbc;
        }
      }
      .two {
        display: flex;
        font-size: 16px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 10px;
        }
        .itContent {
          margin-left: 15px;
          font-size: 14px;
          & > :nth-child(2) {
            margin: 15px 0;
          }
        }
      }
    }
  }
}
</style>